﻿
@{
    ViewBag.Title = "商品评论";
}
<div class="container">
    <div class="comment">
        <div class="row comment-tab">
            <a onclick="returnComment(0)"><span class="col-xs-3">全部<br />@(ViewBag.allComment)</span></a>
            <a onclick="returnComment(1)"><span class="col-xs-3">好评<br />@(ViewBag.goodComment)</span></a>
            <a onclick="returnComment(2)"><span class="col-xs-3">中评<br />@(ViewBag.mediumComment)</span></a>
            <a onclick="returnComment(3)"><span class="col-xs-3">差评<br />@(ViewBag.bedComment)</span></a>
        </div>
        <div class="evaluate">
            <div class="total-evaluate">
                <strong>@((int)ViewBag.allComment == 0 ? "100" : Math.Round((Double)ViewBag.goodComment*100 / ViewBag.allComment))%</strong>
                <span>好评度</span>
            </div>
            <ol>
                <li>
                    好评
                    <div class="progress progress-sm">
                        <div class="progress-bar progress-bar-danger" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: @((int)ViewBag.allComment == 0 ? "100" : (Double)ViewBag.goodComment * 100 / ViewBag.allComment)%"></div>
                    </div>
                    @((int)ViewBag.allComment == 0 ? "100" : Math.Round((Double)ViewBag.goodComment * 100 / ViewBag.allComment))%
                </li>
                <li>
                    中评
                    <div class="progress progress-sm">
                        <div class="progress-bar progress-bar-danger" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:@((int)ViewBag.allComment == 0 ? "0" : (Double)ViewBag.mediumComment * 100 / ViewBag.allComment)%"></div>
                    </div>
                    @((int)ViewBag.allComment == 0 ? "0" : Math.Round((Double)ViewBag.mediumComment * 100 / ViewBag.allComment))%
                </li>
                <li>
                    差评
                    <div class="progress progress-sm">
                        <div class="progress-bar progress-bar-danger" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: @((int)ViewBag.allComment == 0 ? "0" : (Double)ViewBag.bedComment * 100 / ViewBag.allComment)%"></div>
                    </div>
                    @((int)ViewBag.allComment == 0 ? "0" : Math.Round((Double)ViewBag.bedComment * 100 / ViewBag.allComment))%
                </li>
            </ol>
        </div>
        <div class="comment-hd">
            <strong>评论</strong>
            好评 <span>@((int)ViewBag.allComment == 0 ? "100" : Math.Round((Double)ViewBag.goodComment * 100 / ViewBag.allComment))%</span>
            <em>@(ViewBag.allComment)条 评价</em>
        </div>
        <ul id="productComment">
        </ul>
        <div class="loading hide" id="autoLoad"><span></span></div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        loadProductComments(1);
    })
    var page = 1;

    var pid = QueryString("pId");

    var commentType = QueryString("commentType");

    $(".comment-tab>a").eq(commentType).addClass("active");

    function returnComment(commentType)
    {
        location.href = '/' + areaName + '/Product/ProductComment?pId=' + pid + '&commentType=' + commentType;
    }

    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();

        if (scrollTop + windowHeight >= scrollHeight) {
            $('#autoLoad').removeClass('hide');
            loadProductComments(++page);
        }
    });

    function loadProductComments(page) {
        var areaname = '@ViewBag.AreaName';

        var url = '/' + areaName + '/Product/GetProductComment';
        $.post(url, { pId: pid, pageNo: page, commentType: commentType, pageSize: 8 }, function (result) {
            $('#autoLoad').addClass('hide');
            var html = '';
            if (result.length > 0) {
                $.each(result, function (i, items) {
                    html += '<li><div><span class="name">' + items.UserName + '</span>';
                    for (j = 0; j < items.ReviewMark; j++) {
                        html += '<i class="glyphicon glyphicon-star"></i>';
                    }
                    html += '<em>' + items.ReviewDate + '</em>';
                    html += '</div>';
                    html += '<p>' + items.ReviewContent + '</p></li>';
                });
                $('#productComment').append(html);
            }
           
            else {
                $('#autoLoad').html('没有更多评论了').removeClass('hide');
            }
        });
    }
</script>